<template>
  <div class="page-container">
    <!-- 查询条件 -->
    <div class='toolbar' >
      <el-form :inline='true' :model='selectParams' size='mini' class='demo-form-inline' label-width="100px" style="width:100%">
        <el-form-item label='开始时间'>
          <el-date-picker
            v-model="selectParams.startTime"
            type="datetime"
            style="width:83%"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label='结束时间'>
          <el-date-picker
            v-model="selectParams.endTime"
            type="datetime"
            style="width:83%"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label='主叫端口号'>
          <el-input v-model="selectParams.port" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label='被叫号码'>
          <el-input v-model="selectParams.dstAddr" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label='行业类别'>
          <el-select v-model="selectParams.industryType" placeholder="请选择" style="width:91%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='跨域行业类别'>
          <el-select v-model="selectParams.crossIndustryType" placeholder="请选择" style="width:91%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='企业名称'>
          <el-input v-model="selectParams.encName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label='客户编码'>
          <el-input v-model="selectParams.clientCode" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label='客户级别'>
          <el-select v-model="selectParams.customerLevel" placeholder="请选择" style="width:91%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='端口状态'>
          <el-select v-model="selectParams.portStatus" placeholder="请选择" style="width:91%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='产品名称'>
          <el-select v-model="selectParams.productName" placeholder="请选择" style="width:91%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='端口健康级别'>
          <el-select v-model="selectParams.healthLevel" placeholder="请选择" style="width:91%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='所属区县'>
          <el-input v-model="selectParams.proName"></el-input>
        </el-form-item>
        <el-form-item label='是否生成报表'>
          <el-checkbox v-model="checked"></el-checkbox>
        </el-form-item>
        <el-form-item label>
          <kt-button
            icon='fa fa-search'
            :label="$t('action.search')"
            perms='sys:menu:save'
            type='primary'
            @click="getData"
          />
          <kt-button
            icon='fa fa-repeat'
            :label="$t('action.reset')"
            perms='sys:menu:save'
            type='primary'
            @click="resetForm"
          />
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <cs-table :table-data="tableData"
              :table-label="tableLabel"
              :loading="loading"
              :selection='selectionType'
              :table-option="tableOption"
              @handleButton="handleButton">
    </cs-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="selectParams.pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      style="text-align: right;"
      >
    </el-pagination>
    <!-- 详情对话框 -->
    <detail-dialog ref="detailDialogRef"/>
  </div>
</template>

<script>
import KtButton from '@/views/Core/KtButton'
import { crossData } from '@/api/spam'
import DetailDialog from './components/detail'
export default {
  components:{
		'CsTable': () => import('@/components/cs-table'),
    KtButton,
    DetailDialog
  },
  data() {
    return {
      checked: false,
      loading: false,
      options: [
        {
          value: '选项1',
          label: '参数1'
        },
        {
          value: '选项2',
          label: '参树2'
        },
        {
          value: '选项3',
          label: '参数3'
        },
        {
          value: '选项4',
          label: '参数4'
        },
        {
          value: '选项5',
          label: '参数5'
        }
      ],
      typeOptions: [
        {
          value: '1',
          label: '时间'
        },
        {
          value: '2',
          label: '类型'
        }
      ],
      selectParams: {
        startTime: '',
        endTime: '',
        port: '',
        dstAddr: '',
        industryType: '',
        crossIndustryType: '',
        smContent: '',
        hitCnt: '',
        encName: '',
        svcId: '',
        clientCode: '',
        customerLevel: '',
        proName: '',
        townName: '',
        portStatus: '',
        healthLevel: '',
        productName: ''
      },
      pageNo: 1,
      pageSize: 10,
      totalPage: 4,
      selectionType: 'index',
      tableLabel: [
        {
          label: '入库时间',
          param: 'timestamp',
          align: 'center',
          minWidth: '12%',
          isShow: true
        },
        {
          label: '主叫端口号',
          param: 'port',
          align: 'center',
          minWidth: '10%',
          isShow: true,
          sortable: false
        },
        {
          label: '被叫号码',
          param: 'dstAddr',
          align: 'center',
          minWidth: '10%',
          sortable: false,
          isShow: true
        },
        {
          label: '行业类别',
          param: 'industryType',
          align: 'center',
          minWidth: '10%',
          sortable: false,
          isShow: true
        },
        {
          label: '跨域行业类别',
          param: 'crossIndustryType',
          align: 'center',
          minWidth: '10%',
          sortable: false,
          isShow: true
        },
        {
          label: '短信内容',
          param: 'smContent',
          align: 'center',
          minWidth: '20%',
          sortable: false,
          isShow: true
        },
        {
          label: '命中次数',
          param: 'hitCnt',
          align: 'center',
          minWidth: '8%',
          sortable: false,
          isShow: true
        },
        {
          label: '企业名称',
          param: 'encName',
          align: 'center',
          minWidth: '8%',
          sortable: false,
          isShow: true
        }
      ],
      tableOption: {
        label: '操作',
        width: '120',
        options: [
          { label: '详情', type: 'warning', icon: 'el-icon-tickets', methods: 'detail', size: 'mini', auth: 'sys:user:update' },
        ]
			},
      tableData: [
        {
          time: '2020-05-11 12:24:34',
          port: '95598',
          phoneNum: '18883888714',
          type1: '电力、燃气及水的生产和供应业',
          type2: '金融业',
          msg: '【交费成功提醒】尊敬的重庆市城投公租房建设有限公司，您于年月日时分秒，已成功为重庆市巴南区界石镇石桂大道号幢-的用电(）交费.元，当前可用余额为.元。',
          num: 2,
          comName: '电力公司'
        }, {
          time: '2020-05-11 12:24:34',
          port: '95598',
          phoneNum: '18883888714',
          type1: '电力、燃气及水的生产和供应业',
          type2: '金融业',
          msg: '【交费成功提醒】尊敬的重庆市城投公租房建设有限公司，您于年月日时分秒，已成功为重庆市巴南区界石镇石桂大道号幢-的用电(）交费.元，当前可用余额为.元。',
          num: 2,
          comName: '电力公司'
        }, {
          time: '2020-05-11 12:24:34',
          port: '95598',
          phoneNum: '18883888714',
          type1: '电力、燃气及水的生产和供应业',
          type2: '金融业',
          msg: '【交费成功提醒】尊敬的重庆市城投公租房建设有限公司，您于年月日时分秒，已成功为重庆市巴南区界石镇石桂大道号幢-的用电(）交费.元，当前可用余额为.元。',
          num: 2,
          comName: '电力公司'
        }, {
          time: '2020-05-11 12:24:34',
          port: '95598',
          phoneNum: '18883888714',
          type1: '电力、燃气及水的生产和供应业',
          type2: '金融业',
          msg: '【交费成功提醒】尊敬的重庆市城投公租房建设有限公司，您于年月日时分秒，已成功为重庆市巴南区界石镇石桂大道号幢-的用电(）交费.元，当前可用余额为.元。',
          num: 2,
          comName: '电力公司'
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData () {
      let params = {
        page: this.pageNo,
        size: this.pageSize
      }
      crossData(params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.content
          this.totalPage = parseInt(res.data.totalElements)
        }
      })
    },
    // 重置表单
    resetForm() {
      for (let item in this.selectParams) {
        this.selectParams[item] = ''
      }
    },
    // 详情按钮
    handleButton(methods, row, index) {
      this.$refs.detailDialogRef.init(methods.row)
    },
    // 每页数
		sizeChangeHandle (val) {
			this.pageSize = val
      this.pageNo = 1
      this.initData()
		},
		// 当前页
		currentChangeHandle (val) {
      this.pageNo = val
      this.initData()
    },
  }
}
</script>

<style lang="scss" scoped>
</style>